const HOST = window.location.origin;

var colors = ['#5793f3', '#d14a61', '#675bba'];

// 折线
var colors = ['#0997c1', '#c22167', '#082773', '#604fb9', '#0067c3', '#68cdfb', '#5793f3', '#d14a61', '#675bba'];

var option = {
    color: colors,
    title: {
        text: '机房功率TOP5',
        fontSize: "30px",

        textStyle: {
            color: '#fff'
        },
        left: '220px',
        bottom: '270px'
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: [],
        icon: 'roundRect',
        textStyle: {
            color: '#fff'
        },
        orient: 'left',
        x: 'right',
        // right: '40px'
    },
    grid: {
        // top: "10%",
        // bottom: "20%",
        // left: "100px"
        // containLabel: true
        left: '1%',
        right: '15%',
        bottom: '4%',
        top: '8%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                rotate: 40,
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    show: false,
                    formatter: function (params) {
                        return params.value
                            + (params.seriesData.length ? ':' + params.seriesData[0].data : '');
                    }
                }
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 550,
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                formatter: '{value}'
            },
            min: 350,
            splitLine: {
                show: false
            },
            // data: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    ],
    series: [],
};


var optionbtm = {
    color: colors,
    title: {
        text: '机房湿度TOP5',
        textStyle: {
            color: '#fff'
        },
        left: '220px',
        bottom: '270px'
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: [],
        icon: 'roundRect',
        textStyle: {
            color: '#fff',
            fontSize: 10
        },
        orient: 'left',
        x: 'right',
        // y: 'center'


    },
    grid: {
        left: '4%',
        right: '20%',
        bottom: '24%',
        top: '3%',
        // containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 10,
                rotate: 40,
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    show: false,
                    formatter: function (params) {
                        return params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 55,
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                formatter: '{value}'
            },
            min: 46,
            splitLine: {
                show: false
            },
            data: []
        }
    ],
    series: []
};

var optionbtm2 = {
    color: colors,
    title: {
        text: '设备用电量TOP5',
        textStyle: {
            color: '#fff'
        },
        left: '220px',
        bottom: '270px'
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: [],
        icon: 'roundRect',
        textStyle: {
            color: '#fff'
        },
        orient: 'left',
        x: 'right',
    },
    grid: {
        top: 30,
        bottom: 60,
        left: '1%',
        right: '15%',
        bottom: '4%',
        top: '8%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                rotate: 40,
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    show: false,
                    formatter: function (params) {
                        return params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 8000,
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                formatter: '{value}'
            },
            min: 4000,
            splitLine: {
                show: false
            },
            data: []
        }
    ],
    series: []
};

var optionCenter = {
    color: colors,
    title: {
        text: '机房温度TOP5',
        textStyle: {
            color: '#fff'
        },
        left: '220px',
        bottom: '270px'
    },
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: [],
        icon: 'roundRect',
        textStyle: {
            color: '#fff',
            fontSize: 10
        },
        orient: 'left',
        x: 'right',
        // y: 'center'


    },
    grid: {
        left: '4%',
        right: '20%',
        bottom: '24%',
        top: '3%',
        // containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                rotate: 30,
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    show: false,
                    formatter: function (params) {
                        return params.value
                            + (params.seriesData.length ? ':' + params.seriesData[0].data : '');
                    }
                }
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value',
            max: 34,
            axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                formatter: '{value}'
            },
            min: 20,
            splitLine: {
                show: false
            },
            data: []
        }
    ],
    series: [
    ]
};
//[];


//折线xiao

///饼图
let option2 = {
    title: {
        text: '合计',
        textStyle: {
            color: '#fff'
        },
        subtext: '',
        subtextStyle: {
            color: '#fff',
            fontSize: 18,
        },
        x: 'center',
        y: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{c}'
    },
    legend: {
        show: true,
        y: 'top',
        data: [],
        orient: 'left',
        x: 0,
        y: 0,
        textStyle: {
            fontSize: '14',
            color: '#fff'
        },
    },
    calculable: true,
    series: [
        {
            color: ['#0997c1', '#c22167', '#082773', '#604fb9', '#0067c3', '#68cdfb'],
            type: 'pie',
            radius: [50, 200],
            center: ['50%', '50%'],

            //roseType: 'radius',
            label: {
                normal: {
                    /* position: 'inside',*/
                    color: "#fff"
                }
            },
            tooltip: {
                formatter: function (params) {
                    var b = parseFloat(params.value).toString();
                    var len = b.length;
                    if (len <= 3) { return b; }
                    var r = len % 3;
                    var aNew = b.split(".")[1];
                    return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") + "." + aNew : b.slice(r, len).match(/\d{3}/g).join(",");
                }
            },
            itemStyle: {
                normal: {

                    /*borderWidth: 14.5,
                    borderColor: 'rgba(255, 255, 255, 1)'*/
                }
            },
            data: []
        }
    ]
}

let option22 = {
    title: {
        text: '合计',
        subtext: '',
        subtextStyle: {
            color: '#fff',
            fontSize: 18,
        },
        textStyle: {
            color: '#fff',
            verticalAlign: 'top'
        },
        x: 'center',
        y: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{c}'
    },
    legend: {
        show: true,
        y: 'top',
        data: [],
        orient: 'top',
        x: 0,
        y: 0,
        textStyle: {
            fontSize: '14',
            color: '#fff'
        },
    },
    calculable: true,
    series: [
        {
            color: ['#0997c1', '#c22167', '#082773', '#604fb9', '#0067c3', '#68cdfb'],
            type: 'pie',
            radius: [50, 200],
            center: ['50%', '50%'],

            //roseType: 'radius',
            label: {
                normal: {
                    /* position: 'inside',*/
                    color: "#fff"
                }
            },
            tooltip: {
                formatter: function (params) {
                    var b = parseFloat(params.value).toString();
                    var len = b.length;
                    if (len <= 3) { return b; }
                    var r = len % 3;
                    var aNew = b.split(".")[1];
                    return r > 0 ? b.slice(0, r) + "," + b.slice(r, len).match(/\d{3}/g).join(",") + "." + aNew : b.slice(r, len).match(/\d{3}/g).join(",");
                }
            },
            itemStyle: {
                normal: {

                    /*borderWidth: 14.5,
                    borderColor: 'rgba(255, 255, 255, 1)'*/
                }
            },
            data: []
        }
    ]
}


/*var webkitDep = {  
    "type": "force",  
    "categories": [//关系网类别，可以写多组  
        {  
            "name": "人物关系",//关系网名称  
            "keyword": {},  
            "base": "人物关系"  
        }  
    ],  
    "nodes": [//展示的节点  
        {  
            "name": "齐悦科技",//节点名称  
            "value": 3,  
            "category": 0//与关系网类别索引对应，此处只有一个关系网所以这里写0  
        },  
        {  
            "name": "股权链",  
            "value": 1,  
            "category": 0  
        },  
        {  
            "name": "信用链",  
            "value": 1,  
            "category": 0  
        },
       {  
            "name": "股东",  
            "value": 1,  
            "category": 0  
        } 
    ],  
    "links": [//节点之间连接  
        {  
            "source": 0,//起始节点，0表示第一个节点  
            "target": 1 //目标节点，1表示与索引为1的节点进行连接  
        },  
        {  
            "source": 0,  
            "target": 2  
        },{  
            "source": 1,  
            "target": 3  
        }  
    ]  
};  
  
    optiongx = {  
        legend: {  
            data: ['人物关系']//此处的数据必须和关系网类别中name相对应  
        },  
        series: [{  
            type: 'graph',  
            layout: 'force',  
            animation: false,  
            label: {  
                normal: {  
                    show:true,  
                    position: 'right'  
                }  
            },  
            draggable: true,  
            data: webkitDep.nodes.map(function (node, idx) {  
                node.id = idx;  
                return node;  
            }),  
            categories: webkitDep.categories,  
            force: {  
                edgeLength: 105,//连线的长度  
                repulsion: 100  //子节点之间的间距  
            },  
            edges: webkitDep.links  
        }]  
    };  
    var guanxi = echarts.init(document.getElementById('guanxi'));
    guanxi.setOption(optiongx);  */
function tohref() {
    window.location.href = "sanlian.html?1";
}
function toindex() {
    window.location.href = "index.html";


}

function loadtm() {
    var days = new Array("日", "一", "二", "三", "四", "五", "六");
    var currentDT = new Date();
    var y, m, date, day, hs, ms, ss, theDateStr;
    y = currentDT.getFullYear(); //四位整数表示的年份  
    m = currentDT.getMonth() + 1; //月  
    date = currentDT.getDate(); //日  
    day = currentDT.getDay(); //星期  
    hs = currentDT.getHours(); //时  
    ms = currentDT.getMinutes(); //分  
    ss = currentDT.getSeconds(); //秒  
    theDateStr = y + "年" + m + "月" + date + "日 星期" + days[day] + " " + hs + ":" + ms + ":" + ss;
    // theDateStr = " " + p(hs) + ":" + p(ms) + ":" + p(ss);
    // console.log(theDateStr)
    $(".tmtext>span span").html(theDateStr);
    // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次  

}
function p(s) {
    return s < 10 ? '0' + s : s;
}
window.setInterval(loadtm, 1000);

//
// 路径配置
require.config({
    paths: {
        echarts: 'https://echarts.baidu.com/build/dist'
    }
});
var nodes = [];
var links = [];
var constMaxDepth = 2;
var constMaxChildren = 7;
var constMinChildren = 4;
var constMaxRadius = 10;
var constMinRadius = 2;

nodes = [//展示的节点  
    {
        "name": "齐悦科技",//节点名称  
        "value": 43,
        "depth": 0,
        "id": 0,
        "category": 3//与关系网类别索引对应，此处只有一个关系网所以这里写0  
    },
    {
        "name": "股权链",
        "value": 20,
        "category": 2,
        "depth": 1,
        "id": 1,
    },
    {
        "name": "信用链",
        "value": 20,
        "category": 2,
        "depth": 2,
        "id": 2,
    },
    {
        "name": "股东",
        "value": 10,
        "category": 1,
        "depth": 1,
        "id": 3
    }, {
        "name": "愉悦投资66.67%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 4
    }, {
        "name": "愉悦投资33.33%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 5
    }, {
        "name": "供应链",
        "value": 20,
        "category": 2,
        "depth": 3,
        "id": 6,
    },
    {
        "name": "控股公司",
        "value": 10,
        "category": 1,
        "depth": 1,
        "id": 7
    }, {
        "name": "愉悦家纺100%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 8
    }, {
        "name": "东力热电45%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 9
    }, {
        "name": "愉悦物流60%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 10
    }, {
        "name": "居家悦品90%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 11
    }, {
        "name": "黄河三角洲19.29%",
        "value": 3,
        "category": 0,
        "depth": 1,
        "id": 12
    }, {
        "name": "关联公司",
        "value": 10,
        "category": 1,
        "depth": 2,
        "id": 13
    }
    , {
        "name": "银行借款",
        "value": 10,
        "category": 1,
        "depth": 2,
        "id": 14
    }, {
        "name": "银行授信",
        "value": 10,
        "category": 1,
        "depth": 2,
        "id": 15
    }, {
        "name": "存续债券",
        "value": 10,
        "category": 1,
        "depth": 2,
        "id": 16
    }, {
        "name": "担保类系链",
        "value": 10,
        "category": 1,
        "depth": 2,
        "id": 17
    }, {
        "name": "滨印集团28%",
        "value": 3,
        "category": 0,
        "depth": 2,
        "id": 18
    }, {
        "name": "17齐悦0183%",
        "value": 3,
        "category": 0,
        "depth": 2,
        "id": 19
    }, {
        "name": "上游",
        "value": 10,
        "category": 1,
        "depth": 3,
        "id": 20
    }, {
        "name": "下游",
        "value": 10,
        "category": 1,
        "depth": 3,
        "id": 21
    }, {
        "name": "铜陵华源麻业9.86%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 22
    }, {
        "name": "邹平泰升纺织7.31%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 23
    }, {
        "name": "荆州福瑞源纺织6.93%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 24
    }, {
        "name": "山东祥瑞祥纺织6.55%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 25
    }, {
        "name": "江苏明源纺织6.31%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 26
    }, {
        "name": "IKEA Supply AG18.45%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 27
    }, {
        "name": "威海海思5.74%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 28
    }, {
        "name": "圣美伦5.62%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 29
    }, {
        "name": "威海润凡4.16%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 30
    }, {
        "name": "宜家分拨（上海）3.79%",
        "value": 3,
        "category": 0,
        "depth": 3,
        "id": 31
    }
];
links = [//节点之间连接  
    {
        "source": 0,//起始节点，0表示第一个节点  
        "target": 1,
        "weight": 1
    },
    {
        "source": 0,
        "target": 2
    },
    {
        "source": 0,//起始节点，0表示第一个节点  
        "target": 6,
        "weight": 1
    }, {
        "source": 1,
        "target": 3
    }, {
        "source": 1,
        "target": 7
    }, {
        "source": 3,
        "target": 4
    }
    , {
        "source": 3,
        "target": 5
    }, {
        "source": 7,
        "target": 8
    }, {
        "source": 7,
        "target": 9
    },
    {
        "source": 7,
        "target": 10
    }, {
        "source": 7,
        "target": 11
    }, {
        "source": 7,
        "target": 12
    }, {
        "source": 2,
        "target": 13
    }, {
        "source": 2,
        "target": 14
    }, {
        "source": 2,
        "target": 15
    }, {
        "source": 2,
        "target": 16
    }, {
        "source": 2,
        "target": 17
    }, {
        "source": 17,
        "target": 18
    }, {
        "source": 16,
        "target": 19
    }, {
        "source": 6,
        "target": 20
    }, {
        "source": 6,
        "target": 21
    }, {
        "source": 20,
        "target": 22
    }, {
        "source": 20,
        "target": 23
    }, {
        "source": 20,
        "target": 24
    }, {
        "source": 20,
        "target": 25
    }, {
        "source": 20,
        "target": 26
    }, {
        "source": 21,
        "target": 27
    }, {
        "source": 21,
        "target": 28
    }, {
        "source": 21,
        "target": 29
    }, {
        "source": 21,
        "target": 30
    }, {
        "source": 21,
        "target": 31
    }, {
        "source": 21,
        "target": 32
    }
]
for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].id == "0") {
        nodes[i].itemStyle = {
            normal: {
                borderColor: '#000',
                color: 'blue',
                label: {
                    show: true,
                }
            }
        }
    }
    else if (nodes[i].id == "22") {
        nodes[i].itemStyle = {
            normal: {
                label: {
                    show: true,
                    textStyle: {
                        color: 'yellow'
                    }

                },
            }
        }
    }
    //22
    nodes[i]["symbolSize"] = nodes[i].value * 1.2;
}
console.log(nodes);
/**
require(
    [
        'echarts',
        'echarts/chart/force' // 使用柱状图就加载bar模块，按需加载
    ],

    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        // var guanxi = ec.init(document.getElementById('guanxi'));
        option3 = {
            title: {
                x: 'right',
                y: 'bottom'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            toolbox: {
                show: true,
                feature: {
                    restore: { show: true },
                    magicType: { show: true, type: ['force', 'chord'] },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                x: 'left',
                data: ['四级', '三级', '二级'],
                orient: 'left',
                x: 10,
                y: 10,
                textStyle: {
                    fontSize: '14',
                    color: '#fff'
                },
            },
            series: [
                {
                    type: 'force',
                    name: "Force tree",
                    ribbonType: false,
                    categories: [
                        {
                            name: '四级'
                        },
                        {
                            name: '三级'
                        },
                        {
                            name: '二级'
                        }
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            nodeStyle: {
                                brushType: 'both',
                                borderColor: 'rgba(255,215,0,0.6)',
                                borderWidth: 1
                            }
                        }
                    },
                    minRadius: constMinRadius,
                    maxRadius: constMaxRadius,
                    symbolSize: function (params) {
                        console.log(params)
                    },
                    coolDown: 0.995,
                    steps: 10,
                    nodes: nodes,
                    links: links,
                    steps: 1
                }
            ]
        };
        console.log(option3)
        // guanxi.setOption(option3);
    });

  */

/**
 * 
 * lijiang  function
 */

function getDeviceCountUsed() {
    $.get(HOST + '/api/getDeviceCountUsed', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        $('#countDeviceUsed').text(result.data);
    })
}


function getDeviceCountOFF() {
    $.get(HOST + '/api/getDeviceCountOFF', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        $('#countDeviceCountOFF').text(result.data);
    })
}

function getDeviceCountON() {
    $.get(HOST + '/api/getDeviceCountON', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        $('#countDeviceCountON').text(result.data);
    })
}

/**
 * 
 * shuaibi function
 */

function loadlns1(lins1) {
    let url = '/api/getBarChatData';

    $.get(HOST + url, function (res) {
        let index_bar_chat_data = JSON.parse(res)

        console.log('get index_bar_chat_data: ', index_bar_chat_data);

        let option1 = {
            title:{
                text :"机房用电分项统计",
                textStyle:{
                    color: '#fff',
                    fontSize: 25,
                    verticalAlign: 'top'
                },
                x: 'center',
                y: 'top'
            },
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '4%',
                right: '10%',
                bottom: '4%',
                top: '8%',
                containLabel: true
            },

            legend: {
                data: index_bar_chat_data.itemList,
                textStyle: {
                    color: "#fff"
                },
                /* icon: 'roundRect',*/
                orient: 'left',
                x: 'right',
                textStyle: {
                    fontSize: '14',
                    color: '#fff'
                },
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: index_bar_chat_data.xAxis,
                    axisLabel: {
                        formatter: '{value}',
                        color: "#fff",
                        scale: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '用电量',
                    min: 0,
                    max: index_bar_chat_data.max,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color: "#fff"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0)',
                        }
                    },
                },
                {
                    type: 'value',
                    name: 'PUE',
                    min: index_bar_chat_data.minPue,
                    max: index_bar_chat_data.maxPue,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        color: "#fff"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0)',
                        }
                    },
                    show:false
                },
                {
                    type: 'value',
                    name: '温度',
                    show: false
                }
            ],
            series: index_bar_chat_data.series
        };
        lins1.setOption(option1);
    })
}

function loadTable() {
    var deviceTable = $('#deviceMeteTable');
    deviceTable.empty();
    $.get(HOST + '/api/getDeviceMeteTable', function (res) {
        let result = JSON.parse(res)
        console.log(result);
        let dateList = result.dateList;
        deviceTable.append($('<tr style="height:30px;" class="tb_title" id="date_tr"></tr>'));
        dateList.forEach(date_str => {
            $('#date_tr').append(`<td>${date_str}</td>`);
        });
        deviceTable.append(result.data)
    })
}

function loadlns2(lins2) {
    let url = '/api/getLineData';

    $.get(HOST + url, function (res) {
        let result = JSON.parse(res)
        console.log(result)
        var optionl2 = {
            title: {
                text: '机房PUE曲线',
                subtext: '',
                subtextStyle: {
                    color: '#fff',
                    fontSize: 18,
                },
                textStyle: {
                    color: '#fff',
                    verticalAlign: 'top'
                },
                x: 'center',
                y: 'top'
            },
            color: 'rgba(0, 184, 236, 0.9)',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                show: true,
                orient: 'left',
                x: 'right',
                textStyle: {
                    fontSize: '14',
                    color: '#fff'
                },
            },
            grid: {
                left: '6%',
                right: '6%',
                top: '18%',
                bottom: '6%',
                containLabel: true
            },
            // textStyle: {
            //     fontSize: '14',
            //     fontWeight: 'normal',
            //     color: '#ffffff'
            // },
            xAxis: {
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                    inside: true
                },
                axisLabel: {
                    color: '#fff',
                    interval: 0,
                    fontSize: 12,
                    rotate: 45,
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisPointer: {
                    label: {
                        show: false,
                        backgroundColor: '#007EDD'
                    }
                },

                data: result.meteNameList,
            },
            yAxis: {
                show: true,
                axisLabel: {
                    color: '#fff',
                    interval: 0,
                    fontSize: 12
                },
                axisTick: {
                    alignWithLabel: true,
                    inside: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisPointer: {
                    label: {
                        show: false,
                    }
                },
                type: 'value',
                symbol: 'circle',
                symbolSize: 10,
                smooth: true,
                splitLine: {
                    show: true,
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'rgba(255, 255, 255, 0)',
                    }
                }
            },
            series: []
        };
        // optionl2.series.push
        var index = 0;
        // for (var deviceId in result.data) {
            // itemData = result.data[deviceId]
        optionl2.series.push({
            type: 'line',
            // name: ,
            symbol: 'circle',
            symbolSize: 10,
            smooth: true,
            itemStyle: {
                normal: {
                    color: 'rgba(0, 184, 236, 0)',
                },
                emphasis: {
                    color: 'rgba(0, 184, 236, 1)',
                }
            },
            lineStyle: {
                normal: {
                    color: 'rgba(0, 184, 236, 0.9)',
                }
            },
            data: result.data,
            areaStyle: {
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: colors[index],
                        }, {
                            offset: 1,
                            color: 'rgba(0, 184, 236, 0.1)',
                        }],
                        globalCoord: false
                    },
                }
            },
        })
            // index++;
        // }
        lins2.setOption(optionl2);
    })

}


function loadLine1(myChart) {
    $.get(HOST + '/api/getPowerList', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        option.legend.data = result.nameList;
        option.xAxis[0].data = result.timeList;
        option.series = result.series;
        myChart.setOption(option);
        setInterval(function () {
            option.series.forEach(item => {
                if ('dataBack' in item) {
                    if (item.data.length === item.dataBack.length) {
                        item.data = [item.dataBack[0]];
                    } else {
                        item.data.push(item.dataBack[item.data.length]);
                    }
                }
                myChart.setOption(option);
            });

        }, 1000);
    })
}


function loadLine2(myChart01) {
    $.get(HOST + '/api/getTemplateList', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        optionCenter.legend.data = result.nameList;
        optionCenter.xAxis[0].data = result.timeList;
        optionCenter.series = result.series;
        myChart01.setOption(optionCenter);
        setInterval(function () {
            optionCenter.series.forEach(item => {
                if ('dataBack' in item) {
                    if (item.data.length === item.dataBack.length) {
                        item.data = [item.dataBack[0]];
                    } else {
                        item.data.push(item.dataBack[item.data.length]);
                    }
                }
                myChart01.setOption(optionCenter);
            });

        }, 1000);
    })
}


function loadLine3(myChart02) {
    $.get(HOST + '/api/getHumidnessList', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        optionbtm.legend.data = result.nameList;
        optionbtm.xAxis[0].data = result.timeList;
        optionbtm.series = result.series;
        myChart02.setOption(optionbtm);
        setInterval(function () {
            optionbtm.series.forEach(item => {
                if ('dataBack' in item) {
                    if (item.data.length === item.dataBack.length) {
                        item.data = [item.dataBack[0]];
                    } else {
                        item.data.push(item.dataBack[item.data.length]);
                    }
                }
                myChart02.setOption(optionbtm);
            });

        }, 1000);
    })
}

function loadLine4(myChart03) {
    $.get(HOST + '/api/getElectricityList', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        optionbtm2.legend.data = result.nameList;
        optionbtm2.xAxis[0].data = result.timeList;
        optionbtm2.series = result.series;
        myChart03.setOption(optionbtm2);
        setInterval(function () {
            optionbtm2.series.forEach(item => {
                if ('dataBack' in item) {
                    if (item.data.length === item.dataBack.length) {
                        item.data = [item.dataBack[0]];
                    } else {
                        item.data.push(item.dataBack[item.data.length]);
                    }
                }
                myChart03.setOption(optionbtm2);
            });

        }, 1000);
    })
}


function loadPie1(myChart2) {
    $.get(HOST + '/api/getPieData1', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        option2.legend.data = result.nameList;
        option2.title.subtext = result.total;
        option2.series[0].data = result.data;
        myChart2.setOption(option2);

    })
}


function loadPie2(myChart3) {
    $.get(HOST + '/api/getPieData2', 'json', function (res) {
        let result = JSON.parse(res);
        console.log(result);
        option22.legend.data = result.nameList;
        option22.title.subtext = result.total;
        option22.series[0].data = result.data;
        myChart3.setOption(option22);

    })
}


function loadJob() {
    var jobList = $('#job');
    jobList.empty();
    $.get(HOST + '/api/getJobLIst', function (res) {
        let result = JSON.parse(res)
        console.log(result);
        let dateList = result.data;

        jobList.append(dateList);
    })
}